import React, { Component } from 'react';
import { connect } from 'dva';
import { message, Modal, Pagination, Popconfirm, Button, Collapse, Table, Form, Checkbox, Spin, DatePicker, Alert, Input, Col, Select ,List} from 'antd';
import styles from './Users.css';
import moment from 'moment';
import Factory from '../factory';
import * as datetime from '../../utils/datetime'
import reportTableCreate from '../addons/ReportTable'
const daoName = "ConfZbpz";
const ButtonGroup = Button.Group;
const Panel = Collapse.Panel;
const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;
const { MonthPicker } = DatePicker;
const InputGroup = Input.Group;
const Option = Select.Option;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 24 },
  },
};
const ReportTable = reportTableCreate("selzbpz");
class SelConfZbFrom extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.props.dispatch({
      type: `selzbpz/fetch`
    });
  }
  showModelHandler(isAdd) {
    this.props.dispatch({
      type: `selzbpz/openModal`
    });
  }
  hideEditHandler() {
    this.props.dispatch({
      type: `selzbpz/hideEdit`
    });
  }
  onCheckboxGroupChange(tpid, selectedItems) {
    this.props.dispatch({
      type: `selzbpz/selectedChange`,
      payload: { tpid, selectedItems }
    }
    );
  }
  onMonthStartChange(date, dateString) {
    this.props.dispatch({
      type: `selzbpz/monthStartChange`,
      payload: { start: dateString }
    }
    );
  }
  onMonthEndChange(date, dateString) {
    this.props.dispatch({
      type: `selzbpz/monthEndChange`,
      payload: { end: dateString }
    }
    );
  }
  onCheckAllChange = (e) => {
    this.setState({
      checkedList: e.target.checked ? DGplainOptions : [],
      indeterminate: true,
      checkAll: e.target.checked,
    });
  }
  query() {
    this.props.dispatch({
      type: `selzbpz/query`,
      payload: { page: null, pageSize: null, sorter: null, filters: null }
    });
  }
  render() {
    let { showEdit, panels, list, selected, rows, page, month } = this.props
    if (list.length === 0) {
      return (
        <Spin tip="页面加载中...">
          <Alert
            message="部门业绩统计"
            description="页面正在加载中，请您稍等..."
            type="info"
          />
        </Spin>
      )
    }
    const panelConts = Object.keys(panels).map((k, i) => {
      let panel = panels[k]
      const gloop = gs => gs.map((h, j) => {
        let g = panel.groups[h]
        let options = []
        g.indexs.map((index) => {
          const item = list[index]
          const option = {
            label: item.NMSX,
            value: index
          }
          options.push(option)
        });
        return <div key={j}>
          <Col span={4} key="1" style={{ textAlign: 'right' }}>{g.name + ":"}</Col>
          <Col span={20} key="2" style={{ paddingLeft: '5px' }}><CheckboxGroup onChange={this.onCheckboxGroupChange.bind(this, h)} options={options} value={selected[h]} /></Col>
        </div>;
      });
      return <Panel header={panel.name} key={i}>{gloop(Object.keys(panel.groups))}</Panel>
    })
    const monthFormat = 'YYYY/MM';
    return (

      
      <div className={styles.normal} style={{ background: '#fff', marginTop: -16, padding: '5px 5px' }}>
        <div>
          <div className={styles.create}>
          <List></List>
            <span>时间:</span>
            <MonthPicker format={monthFormat} placeholder="开始时间" onChange={this.onMonthStartChange.bind(this)} defaultValue={moment(month.start, monthFormat)} />
            <span>~</span>
            <MonthPicker format={monthFormat} placeholder="结束时间" onChange={this.onMonthEndChange.bind(this)} defaultValue={moment(month.end, monthFormat)} />
            <span style={{ marginLeft: 10 }}>币种:</span>
            <Select defaultValue="99">
              <Option value="99">本外币</Option>
              <Option value="01">人民币</Option>
              <Option value="14">外币折人民币</Option>
            </Select>
            <span style={{ marginLeft: 10 }}>单位:</span>
            <Select defaultValue="10000">
              <Option value="10000">万元</Option>
              <Option value="1">元</Option>
            </Select>
            <ButtonGroup style={{ zIndex: 0, marginLeft: 10 }}>
              <Button onClick={this.showModelHandler.bind(this, true)}>指标选择</Button>
              <Button onClick={this.query.bind(this)}>查询</Button>
            </ButtonGroup>
          </div>
          <ReportTable ref="reportTable" model="selzbpz" />
          <Modal title="指标选择" width={700} visible={showEdit} onCancel={this.hideEditHandler.bind(this)}
            footer={[
              <Button key="close" type="ghost" onClick={this.hideEditHandler.bind(this)}>关闭</Button>
            ]}
          >
            <Form onSubmit={this.handleSubmit}>
              <FormItem {...formItemLayout}>
                <Collapse accordion>
                  {panelConts}
                </Collapse>
              </FormItem>
            </Form>
          </Modal>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  const { list, panels, showEdit, selected, rows, page, month, unitBase, cyno } = state.selzbpz;
  return {
    list, panels, showEdit, selected, rows, page, month, unitBase, cyno
  }
}
SelConfZbFrom = connect(mapStateToProps)(SelConfZbFrom)
export default SelConfZbFrom;

let render = (props) => React.createElement(SelConfZbFrom, props);
let f = new Factory()
f.set("SelConfZbFrom", render)
